<template>
  <div class="login">
    <div class="login-item">
      <div class="login-item-item">
        <div class="login-image" shadow="always">
          <el-image class="image" :src="url" shadow="always"/>
        </div>
        <el-card class="box-card">
          <div class="login-text">计软党务学生考试端</div>
          <el-form :label-position="labelPosition" label-width="55px" :model="user">
            <el-form-item label="用户名">
              <el-input v-model="user.name" clearable/>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="user.pass" clearable/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" class="login-btn" :loading="loading" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
  import {UserLogin} from "../../api/index"
  import message from "../../utils/message"
  import store from "../../store";

  export default {
    name: "login",
    data() {
      return {
        labelPosition: 'right',
        user: {
          name: '',
          pass: '',
        },
        loading: false,
        url: require('../../assets/logo.png')
      };
    },
    methods: {

      login() {
        this.loading = true;
        // console.log(this.user);
        if (this.user.name === "" || this.user.pass === "" || (this.user.name === "" && this.user.pass === "")) {
          message({obj: this.$message, message: "输入数据异常,请检查后点击登录按钮", type: "error"});
        } else {
          setTimeout(() => {
            this.loading = false
          }, 1000);
          this.UserLogin(this.user.name, this.user.pass);
        }
      },
      /**
       *
       * @returns {Promise<void>}
       */
      async UserLogin(name, pass) {
        await UserLogin({username: name, password: pass}).then((res) => {
          console.log(res);
          if (res.code === 200) {
            message({obj: this.$message, message: "登录成功", type: "success"});
            // console.log(res.data.token);
            const token = res.data.token;
            localStorage.setItem("party_user", token);
            this.$store.dispatch("setToken", token);
            this.$router.replace("/index/dashboard");
          }else{
            message({obj: this.$message, message: "登录失败", type: "error"});
          }
        }).catch((err) => {
          console.log(err);
        });
      }
    },
  }
</script>

<style scoped>
  .login {
    width: 100%;
  }

  .login-item {
    width: 20%;
    margin: auto;
    margin-top: 15%;
  }

  .login-item-item {
    text-align: center;
  }

  .login-image {
    margin-bottom: -10%;
    right: 0.5%;

  }

  .image {
    width: 100px;
    height: 100px;
    margin-top: -160%;
    border-radius: 3em;
    box-shadow: 2px 2px 2px 2px #fafafa;
  }

  .login-text {
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 250%;
    color: #fafafa;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
  }

  .login-btn {
    margin-left: -16%;
    width: 116%;
  }

  @media screen and (max-width: 768px) {
    .login-item {
      width: 90%;
      margin-top: 40%;
    }

    .login-btn {
      margin-left: -25%;
      width: 125%;
    }

  }


  @media screen and (width: 414px) {
    .login-item {
      width: 90%;
      margin-top: 40%;
    }

    .login-btn {
      margin-left: -20%;
      width: 120%;
    }

  }

  @media screen and (width: 320px) {
    .login-item {
      width: 95%;
      margin-top: 40%;
    }

    .login-btn {
      margin-left: -20%;
      width: 120%;
    }

    .login-text {
      font-size: 230%;
    }

  }

  /*@media screen and (min-width: 768px) {*/
  /*  .login-item {*/
  /*    width: 80%;*/
  /*    margin-top: 40%;*/
  /*  }*/
  /*}*/

</style>
